<template>
  <div id="app">
    <div class="nav-box">
      <ul class="nav">
        <router-link to="/" exact tag="li" event="mouseover">
          <i class="fa fa-home"></i>
          <span>home</span>

        </router-link>


        <router-link :to="{path:'/document#abc'}" active-class="activeClass" tag="li" event="mouseover">
          <i class="fa fa-book"></i>
          <span>document</span>

        </router-link>

        <router-link to="/about" active-class="activePlum" tag="li" event="mouseover">
          <i class="fa fa-glass"></i>
          <span>about</span>

        </router-link>

        <router-link to="/user" active-class="activePeru" tag="li" event="mouseover">
          <i class="fa fa-user"></i>
          <span>user</span>

        </router-link>
      </ul>
    </div>

    <input type="button" value="后退" @click="backHandle"/>
    <input type="button" value="前进" @click="forwardHandle"/>
    <input type="button" value="控制前进后退的步数" @click="goHandle"/>
    <input type="button" value="控制指定的导航push" @click="pushHandle"/>
    <input type="button" value="控制指定的导航replace" @click="replaceHandle"/>

    <!--   当前导航的下标{{$route.meta.index}}-->

    <!-- <router-view name="slider"></router-view>-->


    <transition :name="type">  <!--mode="out-in"-->
      <router-view class="center"></router-view>

    </transition>

  </div>
</template>

<script>
  var pre = -1
  export default {
    name: 'App',
    data() {
      return {
        index: '/home'
      }

    },

    methods: {
      backHandle() {
        this.$router.back()
      },
      forwardHandle() {
        this.$router.forward()
      },
      goHandle() {
        this.$router.go(-1)
      },
      pushHandle() {
        //this.$router.push('/document')
        this.$router.push({path:'/document'})
      },
      replaceHandle() {
        //this.$router.push('/document')
        this.$router.replace({path:'/document'})
      }
    },
    computed: {

      type() {
        let index = this.$route.meta.index
        if (pre == -1) {
          pre = index;
          return 'right'
        }
        if (index > pre) {
          pre = index;
          return "right"
        } else {
          pre = index;
          return "left"
        }

      }
    }
  }
</script>

<style>


  .v-enter {
    opacity: 0;
  }

  .v-enter-to {
    opacity: 1;
  }

  .v-enter-active {
    transition: 0.5s;
  }

  .v-leave {
    opacity: 1;
  }

  .v-leave-to {
    opacity: 0;
  }

  .v-leave-active {
    transition: 1s;
  }

  .left-enter {
    transform: translateX(100%);
  }

  .left-leave-to {
    transform: translateX(-100%);
  }

  .left-leave-active, .left-enter-active {
    transition: 1s;
  }

  .right-enter {
    transform: translateX(-100%);
  }

  .right-leave-to {
    transform: translateX(100%);
  }

  .right-leave-active, .right-enter-active {
    transition: 1s;
  }

</style>
